<template>
  <div>
      <div class="banner">
        <div class="container">
          <div class="row">
            <h1 class="banner_title">Shop_details</h1>
            <div class="breadcrumb">
              <ul>
                <li> <router-link :to="{path:'/'}" exact class="aui-tabBar-item " style="color: orangered;font-size: medium;">Home
                    </router-link></li>
                <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                <li><router-link :to="{path:'/shop'}" exact class="aui-tabBar-item " style="color: orangered;font-size: medium;">Shop
                    </router-link></li>
                <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                <li><router-link :to="{path:'/shop/shop_details'}" exact class="aui-tabBar-item " style="color: orangered;font-size: medium;">Shop_details
                    </router-link></li>
              </ul>
            </div>
          </div>
        </div>
      </div>

    <!--================ Our banner Section end =================-->
    <!--================ Welcome To CATEGORIES=================-->
    <div class="shop-card">
      <div class="blog_left_sidebar cellpadding">
        <div class="container">
          <div class="row">
            <div class="col-xs-6 col-md-4 left-column shop_del">
              <aside class="blogAside">
               <!-- 	Category-START 	-->
                <div class="recentTitle">
                  <h5 class="h5 as">产品分类</h5>
                </div>
                <ul class="categoriesList normall">
                  <li><router-link :to="{name:'aerobic training'}" tag="a" class="type1" >有氧健身产品</router-link></li>
                  <li><router-link :to="{name:'strength training'}" tag="a" >力量训练产品</router-link></li>
                  <li><router-link :to="{name:'fight training'}" tag="a" >搏击训练产品</router-link></li>
                  <li><router-link :to="{name:'leisure fitness'}" tag="a" >懒人健身产品</router-link></li>
                  <li><router-link :to="{name:'yoga training'}" tag="a" >瑜伽训练产品</router-link></li>
                </ul>
              </aside>
            </div>
            
            <!--=========Shop Right Start============-->
            <div class="main2-shoping detail main-89 text-area text-btne">
              <div class="col-md-8 right-column pull-right">
                <div class="wdt-100 marbtm50" >
                  <div class="product-desc">
                    <h3>{{goods_info.goods_name}}</h3>
                    <p class="fnt-17">{{goods_details.goods_detail}}</p>
                    <span class="price">￥{{goods_info.goods_price}}</span>
                    <div class="quantity-cl">
                      <span class="plus-minus" @click="handleAdd()">+</span>
                      <input name="name" type="text" class="quantity-input" v-model="goods_num">
                      <span class="plus-minus" @click="handlereduce()">-</span>
                    </div>
                    <a class="header-requestbtn filter-link add-cart-link hvr-bounce-to-right sim-button button8 " @click="addGoods()"><span>加入购物车</span></a>
                   
                  </div>
                  <div class="product-slider">
                    <img :src="goods_info.goods_img" class="img-responsive" alt="product-large-image">
                  </div>
                </div>
               </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--=========Shop Right end============-->
  </div>
</template>

<script>
  import {getGoodsDetailList} from "../../api/data.js"
  import {addgoods} from "../../api/shop_cart.js"
  import {getUserId} from "../../libs/util.js"
  export default {
    data() {
      return {
        goods_num: 1,
        user_id: getUserId(),
        goods_info: [],
        goods_details: []
      }
    },
    methods: {
      handleAdd(){
        this.goods_num++;
      },
      handlereduce(){
        if(this.goods_num>1){
          this.goods_num--;
        }else{
          this.goods_num=1
        }
      },
      getGoodsDetailList(){
        var goods_id = this.$route.params.goods_id
        console.log(goods_id)
        getGoodsDetailList(goods_id)
        .then(res => {
          console.log(res.data)
          if(res.data.status_code==10000){
            this.goods_details = res.data.data[1][0],
            this.goods_info = res.data.data[0][0]
            var price = this.goods_info.goods_price
            return price
          }else{
            console.log(res.data.message)
          }
          // this.$Message.error("出错了111");
        })
        .catch(err => {
            console.log("出错了222")
            console.log(err)
          }
        )
      },
      addGoods(){
        var goods_infos = {
          user_id : this.user_id,
          goods_id: this.$route.params.goods_id,
          goods_nums: this.goods_num,
          // total: this.count
        }
        addgoods(goods_infos)
        .then(res => {
          console.log(res.data)
          if(res.data.status_code==10000){
             alert("已加入购物车")
          }
        })
        
      }
    },
   
    mounted(){
      this.getGoodsDetailList();
    }
  }
</script>

<style scoped="scoped">
</style>
